<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button-counts></button-counts>
			<button-counts></button-counts>
			<button-counts></button-counts>
			<button v-on:click="count++">
				你点击了{{count}}次
			</button>
			<button v-on:click="count++">
				你点击了{{count}}次
			</button>
			<button v-on:click="count++">
				你点击了{{count}}次
			</button>
			<div id="">
				
			</div>
			在子组件中使用全局组件
		</div>
		
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//定义一个名为button-counts的新组件
			// Vue.component('名称',{
			// 	//配置
			// })
			Vue.component('button-counts',{
				//data是一个function函数，防止组件多次使用时，数据共享
				data:function(){
					return{
						count:0
					}
				},
				//组件的内容
				template:`<button v-on:click="count++">
				你点击{{count}}次</button>`
			});
			new Vue({
				el:"#app",
				data:{
					msg:"父组件内容",
					count:0
				},
				components:{
					'button-sub':{
						template:`<button-counter></button-counter>`
					}
				}
			})
		</script>
	</body>
</html>
